<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每日笔记</title>
</head>
<style>
    html,body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .tou {
        width: 50px;
        height: 50px;
        background-color: #0eee06;
        border: 2px solid black;
        text-align: center;
        margin: 0 auto;
    }
    .box {
        width: 20px;
        height: 20px;
        background-color: #000000;
        float: right;
    }
    .box0 {
        width: 20px;
        height: 20px;
        background-color: black;
        float: left;
    }
    .shenzi {
        height: 300px;
        width: 200px;
        background-color: #0eee06;
        border: 2px solid black;
        text-align: center;
        margin: 0 auto;
        border-radius: 30px;/*边框圆角*/
    }
    .zuo {
        height: 250px;
        width: 50px;
        background-color: #0eee06;
        border: 2px solid black;
        position: relative;/*绝对定位，脱离正常文档，原地起飞到空中的位置，地面的位置就空了，*/
        left: -63px;
        border-radius: 30px;
    }
    .you {
        height: 250px;
        width: 50px;
        background-color: #0eee06;
        border: 2px solid black;
        position: relative;/*相对定位,相对于自身*/
        top: -250px;
        left: 210px;
        border-radius: 30px;
    }
    .shou {
        height: 50px;
        width: 50px;
        background-color: #0eee06;
        border: 1px solid black ;
        border-radius: 50%;
        position: relative;
        top: -250px;
        left: -63px;
    }
    .shou1 {
        height: 50px;
        width: 50px;
        background-color: #0eee06;
        border: 1px solid black ;
        border-radius: 50%;
        position: relative;
        top: -300px;
        left: 210px;
    }
    .jiao1 {
        height: 250px;
        width: 50px;
        background-color: #0eee06;
        border: 2px solid black;
        position: relative;/*相对定位,相对于自身*/
        top: -305px;
        border-radius: 30px;
    }
    .jiao2 {
        height: 250px;
        width: 50px;
        background-color: #0eee06;
        border: 2px solid black;
        position: relative;/*相对定位,相对于自身*/
        top: -560px;
        left: 150px;
        border-radius: 30px;
    }
    .jiao11 {
        height: 50px;
        width: 80px;
        background-color: white;
        border: 3px solid black ;
        position: relative;
        top: -1100px;
        left:60px;
    }
    .jiao22 {
        height: 50px;
        width: 80px;
        background-color: white;
        border: 3px solid black ;
        position: relative;
        top: -1100px;
        left:60px;
    }
    .jiao33 {
        height: 50px;
        width: 80px;
        background-color: white;
        border: 3px solid black ;
        position: relative;
        top: -1100px;
        left:60px;
    }
    .jiao55 {
        height: 50px;
        width: 80px;
        background-color: red;
        border: 3px solid black ;
        position: relative;
        top: -1100px;
        left:60px;
        line-height: 50px;
    }
</style>
<body>
<h1>每日笔记</h1>
<div class="tou">
    <div class="box"></div>
    <div class="box0"></div>

</div>
<div class="shenzi">
    <div class="zuo">
    </div>
    <div class="you">
    </div>
    <div class="shou">
    </div>
    <div class="shou1"></div>
    <div class="jiao1"></div>
    <div class="jiao2"></div>
    <div class="jiao11" ></div>
    <div class="jiao22"></div>
    <div class="jiao33" ></div>
    <div class="jiao55">
        电量不足
    </div>
</div>
</body>
</html>